<template>
  <view>
    <swiper
      class="swiperContainer"
      indicatorColor="#999"
      indicatorActiveColor="#333"
      :current="current"
      :circular="isCircular"
      :autoplay="isAutoplay"
      :indicatorDots="hasIndicatorDots"
    >
      <swiper-item
        v-for="item in banners"
        :key="item.productId"
        @tap="goToDetails(item.productId)"
      >
        <image :src="item.url" class="slide-image" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script lang="ts">
import "./index.less";
import Taro from "@tarojs/taro";
import { getSalesBanners } from "../../../../../services/products-service";

export default {
  data() {
    return {
      current: 1,
      isCircular: false,
      isAutoplay: false,
      hasIndicatorDots: true,
      banners: [],
    };
  },
  methods: {
    goToDetails(productId) {
      Taro.navigateTo({
        url: `/pages/sales/details/index?productId=${productId}`,
      });
    },
    async getBanners() {
      this.banners = await getSalesBanners();
      this.$store.commit("setSalesBanners", this.banners);
    },
  },
  async mounted() {
    await this.getBanners();
  },
};
</script>
